<template>
  <div class='activeIndex2021'>
    <div class='activeIndex_container'>
      <!-- //视频动效 -->
      <div class='video_area'>
        <div class='video_block'>
          <!-- <video class="video-source" width="100%" height="100%" muted preload autoplay loop style="object-fit:fill" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
            x5-video-player-type="h5" x5-video-orientation="h5" x5-video-player-fullscreen="true" poster="https://image.hezongyy.com/pcimage/20211109img/zhc_h5_zz_spt.jpg">
            <source src="https://image.hezongyy.com/pcimage/20211109img/1109zhc_h5_videoFile.mp4" type="video/mp4" />
          </video> -->
          <div class='video_time' v-if="hours">
            <div class='time'>
              <div class='left'>倒计时:</div>
              <div class='right'>{{hours}}:{{minutes}}:{{seconds}}</div>
            </div>
          </div>
          <div class='activityMain'>
            <div class='left' v-if="activityMainLeft" @click='toactivityMain(activityMainLeft)'><img :src="activityMainLeft.img" alt=""></div>
            <div class="right" v-if="activityMainRight" @click='toactivityMain(activityMainRight)'><img :src="activityMainRight.img" alt=""></div>
          </div>
        </div>
      </div>
      <!-- //秒杀 -->
      <div class='skill_area'>
        <div class='skill_content'>
          <div class='tab_block'>
            <van-tabs ref='tabs' :ellipsis="false" v-model="activeTab" title-active-color='#fff' @change="changeTimeTab">
              <van-tab v-for="(item,index) of goosdList" :key="index">
                <template #title>
                  <div style="text-align: center;">{{item.time}}</div>
                  <div style="text-align: center;">{{getStatus(item)}}</div>
                </template>
                <div class='swiper_content' v-if='skillGoodsList' ref="swiper" @click='gotoSkill'>
                  <div id="certify">
                    <div class="swiper-container">
                      <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) of skillGoodsList" :key="index">
                          <div class='swiper_block'>
                            <div style="padding:5px">
                              <div class='swiper_img'>
                                <img :src="item.picture" alt="">
                              </div>
                              <div class='goods'>
                                <div class='row1'>{{item.name}}</div>
                                <div class='row2'> 规格:{{item.specification}}</div>
                                <div class='row3'>
                                  <div class='left'>￥{{item.price}}</div>
                                  <div class='right'>￥{{item.originalPrice}}</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>

        </div>
      </div>
      <!-- //直播 -->
      <div class='live_area'>
        <div class='live_content'>
          <div class='tab_block'>
            <div :class="[type == 0 ? 'activeLeft' : 'left']" @click="changeLive(0, liveInfoLeft )">{{time(liveInfoLeft.previewTime)}}</div>
            <div :class="[type == 1 ? 'activeRight' : 'right']" @click="changeLive(1, liveInfoRight)">{{time(liveInfoRight.previewTime)}}</div>
          </div>
          <div class='live_block' @click='gotoLive(liveInfo)'>
            <div class='live_info'>
              <div class='left' v-if="liveInfo.coverUrl"><img :src="liveInfo.coverUrl" alt=""></div>
              <div class='center'>
                <div class='live_title'>{{liveInfo.roomName}}</div>
                <div class='live_info'>
                  <div class='info' v-if="liveInfo.roomDesc">{{liveInfo.roomDesc}}</div>
                </div>
                <div class='live_time' v-if="liveInfo.previewTime">
                  开播时间：{{time(liveInfo.previewTime)}}
                </div>
              </div>
              <div class='right'>
                <div class='btn2' v-if="liveInfo.liveStatus==0">直播间未开始</div>
                <div class='btn3' v-if="liveInfo.liveStatus==1">点击进入直播间</div>
                <div class='btn2' v-if="liveInfo.liveStatus==2">直播间已结束</div>
              </div>
            </div>
            <div class='live_goods'>
              <div class="live_goods_item" v-for="(item,index) of liveGoodsList" :key="index">
                <div class='live_goods_left'><img :src="item.picUrl" alt=""></div>
                <div class='live_goods_right'>
                  <div class='live_goods_right_title'>{{item.goodsName}}</div>
                  <div class='live_goods_right_gg'>规格:{{item.specification}}</div>
                  <div class='live_goods_right_price'>
                    <span class='left'>直播价:{{item.showPrice}}</span>
                    <span class='right'>￥{{item.originPrice}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- //活动 -->
      <div class='active_area'>
        <div class='active_block'>
          <div class='active1' @click="goToActive('特价')"></div>
          <div class='active2' @click="goToActive('折扣')"></div>
          <div class='active3' @click="goToActive('阶梯价')"></div>
          <div class='active4' @click="goToActive('中药')"></div>
          <div class='active5' @click="goToActive('换购')"></div>
          <div class='active6' @click="goToActive('厂家')"></div>
        </div>
      </div>
      <!-- //优惠券 -->
      <div class='coupons_area'>
        <div class='coupons_btn' @click='goToCoupons'></div>
      </div>
      <!-- //抽奖 -->
      <div class='lucky_draw_area'>
        <!-- //大转盘定位 -->
        <div class='rotate_btn' @click='goToLotter'></div>
        <!-- //盲盒定位 -->
        <div class='blindBox_btn' @click='goToLindBox'></div>
      </div>
      <!-- //返回顶部 -->
      <div class='gotop_area'>
        <div class='btn' @click="gotop"></div>
      </div>
    </div>
    <!-- <popWindowDialog :popWindowInfo='popWindowInfo' /> -->
  </div>
</template>
<script>
import { getRequest } from '@/api/indexGet'
import { postRequest } from '@/api/index'
import url from '@/axios/apiUrl'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import popWindowDialog from './popWindowDialog'
import preloadImg from './preloadImg'

export default {
  components: {
    Swiper,
    popWindowDialog,
  },
  data() {
    return {
      activeTab: 0,
      goosdList: [], //总列表
      skillGoodsList: [], //秒杀列表
      showActive: 0, //显示时间激活状态
      liveInfoLeft: {}, //直播间列表左
      liveInfoRight: {}, //直播间列表右
      liveInfo: {}, //直播信息
      liveGoodsList: [], //直播间商品列表
      liveRoomId: '', //直播房间id
      type: 0, //选择直播日期的类型
      hours: '', //倒计时 时分秒
      minutes: '', //倒计时 时分秒
      seconds: '', //倒计时 时分秒
      activityMainLeft: [], //视频上方广告位左侧
      activityMainRight: [], //视频上方广告位右侧
      popWindowInfo: {},
      numCount: 0,
    }
  },
  created() {
    preloadImg()

    //秒杀列表
  },
  async mounted() {
    // 直播间列表
    // await this.popWindow()
    await this.skillPage()
    await this.adPost2()
    await this.time119()
    await this.getLiveList()
    await this.liveGoodsList1109()
  },
  methods: {
    //数据霸屏
    // async popWindow() {
    //   var res = await getRequest(url.popWindow)
    //   if (res.data.code == '000000') {
    //     this.popWindowInfo = res.data.content
    //   } else if (res.data.message == '系统异常') {
    //     this.$toast('网络异常，请稍后再试')
    //   }
    // },
    //广告位去链接
    toactivityMain(item) {
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (isIos) {
        window.location.href = item.url
        // window.webkit.messageHandlers.openUrl.postMessage(item.url)
      } else {
        if (item.url.indexOf('/nativeApp/goodsList') > -1) {
          japp.openUrl('hz' + item.url)
        } else {
          japp.openUrl(item.url)
        }
      }
    },
    //轮播图实例
    swiper() {
      this.certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        // loop: true,
        autoplay: true,
      })
    },
    //去秒杀
    gotoSkill() {
      window.open(this.pathURL + 'nativeApp/active119ms', '_blank')
    },
    //根据状态去直播
    gotoLive(gotoLive) {
      // status 直播状态（0-未直播；1-直播中；2-直播结束）
      if (gotoLive.liveStatus == 0) {
        window.open(this.pathURL + 'nativeApp/livePreview"', '_blank')
      } else if (gotoLive.liveStatus == 1) {
        window.open(
          this.pathURL + 'nativeApp/liveDetail?id=' + gotoLive.roomId,
          '_blank'
        )
      } else if (gotoLive.liveStatus == 2) {
        window.open(
          this.pathURL + 'nativeApp/liveDetail?id=' + gotoLive.roomId,
          '_blank'
        )
      }
    },

    //广告位主会场
    async adPost2() {
      var form = {}
      form.pageName = 'activityMain'
      form.clientType = 1
      var res = await postRequest(url.adPost, form)
      if (res.data.code == '000000') {
        this.activityMainLeft = res.data.content.activityMainLeft.items[0]
        this.activityMainRight = res.data.content.activityMainRight.items[0]
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      //  else if (res.data.code != '000000') {
      //   this.$toast(res.data.message)
      // }
    },
    //119时间
    async time119() {
      var res = await getRequest(url.time119)
      if (res.data.code == '000000') {
        this.startTime = res.data.content.countDownTime
        this.nowTime = res.data.content.now
        // this.nowTime =
        // this.startTime = 1634287322784
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      // else if (res.data.code != '000000') {
      //   this.$toast(res.data.message)
      // }
      this.countDownInit()
      this.getNowTime()
    },
    //设置时间截取
    time(item) {
      if (item) {
        var mon = item.split('-')
        var temp = mon[1] + '月' + mon[2]
        var time = temp.split(':')
        var result = time[0] + ':' + time[1]
        return result
      }
    },
    //选择直播日期
    changeLive(type, item) {
      this.type = type
      this.liveInfo = item
      this.liveRoomId = item.roomId
      this.liveGoodsList1109()
    },
    // 直播间列表（1109主会场直播）
    async getLiveList() {
      var res = await getRequest(url.liveRooms1109)
      if (res.data.code == '000000') {
        if (res.data.content[0]) {
          this.liveInfoLeft = res.data.content[0]
          this.liveInfo = this.liveInfoLeft
        }
        if (res.data.content[1]) {
          this.liveInfoRight = res.data.content[1]
        }

        this.liveRoomId = this.liveInfoLeft.roomId
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      //  else if (res.data.code != '000000') {
      //   this.$toast(res.data.message)
      // }
    },
    // 直播间商品列表（1109主会场直播）
    async liveGoodsList1109() {
      var res = await getRequest(url.liveGoods1109 + '/' + this.liveRoomId)
      if (res.data.code != '000000') {
        this.liveGoodsList = []
      }
      if (res.data.code == '000000') {
        this.liveGoodsList = res.data.content
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
    },
    //获取状态
    getStatus(item) {
      if (item.status_ == '1') {
        return '进行中'
      } else if (item.status_ == '2') {
        return '未开始'
      }
    },
    //秒杀专区切换时间tab
    async changeTimeTab(index) {
      var item = this.goosdList[index]
      this.skillGoodsList = item.goodsList
      await this.$nextTick()
      this.swiper()
    },
    //秒杀列表
    async skillPage() {
      var res = await getRequest(url.flashIndex)
      if (res.data.code == '000000') {
        this.goosdList = res.data.content
        this.skillGoodsList = res.data.content[0].goodsList
        await this.$nextTick()
        this.swiper()
      }
      if (res.data.message == '系统异常') {
        this.$toast('网络异常，请稍后再试')
      }
      //  else if (res.data.code != '000000') {
      //   this.$toast(res.data.message)
      // }
    },
    //活动跳转地址
    goToActive(name) {
      if (name == '特价') {
        window.open(this.pathURL + 'nativeApp/active119tj', '_blank')
      } else if (name == '折扣') {
        window.open(this.pathURL + 'nativeApp/active119zk', '_blank')
      } else if (name == '阶梯价') {
        var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            this.routerURL + 'ladderPrice119'
          )
        } else {
          japp.openUrl(this.routerURL + 'ladderPrice119')
        }
      } else if (name == '中药') {
        window.open(this.pathURL + 'nativeApp/TCMArea', '_blank')
      } else if (name == '换购') {
        window.open(this.pathURL + 'nativeApp/active119mz', '_blank')
      } else if (name == '厂家') {
        window.open(this.pathURL + 'nativeApp/manufacturerFor', '_blank')
      }
    },
    //去领取优惠券
    goToCoupons() {
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (window.location.href.indexOf('192.168') >= 0) {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'http://192.168.1.184/main_venue/mainapp/#/secondLevel'
          )
        } else {
          japp.openUrl('http://192.168.1.184/main_venue/mainapp/#/secondLevel')
        }
      } else if (window.location.href.indexOf('uatweb') >= 0) {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'https://uatweb.hezongyy.com/main_venue/mainapp/#/secondLevel'
          )
        } else {
          japp.openUrl(
            'https://uatweb.hezongyy.com/main_venue/mainapp/#/secondLevel'
          )
        }
      } else {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'https://www.hezongyy.com/main_venue/mainapp/#/secondLevel'
          )
        } else {
          japp.openUrl(
            'https://www.hezongyy.com/main_venue/mainapp/#/secondLevel'
          )
        }
      }
    },
    //去大转盘抽奖
    goToLotter() {
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (window.location.href.indexOf('192.168') >= 0) {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'http://192.168.1.184/main_venue/mainapp/#/toLotter'
          )
        } else {
          japp.openUrl('http://192.168.1.184/main_venue/mainapp/#/toLotter')
        }
      } else if (window.location.href.indexOf('uatweb') >= 0) {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'https://uatweb.hezongyy.com/main_venue/mainapp/#/toLotter'
          )
        } else {
          japp.openUrl(
            'https://uatweb.hezongyy.com/main_venue/mainapp/#/toLotter'
          )
        }
      } else {
        if (isIos) {
          window.webkit.messageHandlers.openUrl.postMessage(
            'https://www.hezongyy.com/main_venue/mainapp/#/toLotter'
          )
        } else {
          japp.openUrl('https://www.hezongyy.com/main_venue/mainapp/#/toLotter')
        }
      }
    },
    //去盲盒
    goToLindBox() {
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (isIos) {
        window.webkit.messageHandlers.openUrl.postMessage(
          this.routerURL + 'blindBox'
        )
      } else {
        japp.openUrl(this.routerURL + 'blindBox')
      }
    },
    //返回顶部
    gotop() {
      document.documentElement.scrollTop = document.body.scrollTop = 0
    },
    // 获取当前时间
    countDownInit() {
      clearInterval(this.curTime)
      this.curTime = setInterval(() => {
        this.nowTime = this.nowTime + 1000
      }, 1000)
    },
    // 计算时间
    getNowTime() {
      this.timeName = setInterval(() => {
        //计算距离本场开始剩余时间
        // 结束时间时间戳
        if (this.startTime - this.nowTime > 0) {
          this.hours = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60 / 60) % 24
          )
          // 判断小时是否大于24小时
          if (this.startTime - this.nowTime > 86400000) {
            var num = parseInt((this.startTime - this.nowTime) / 86400000)
            this.hours = num * 24 + this.hours
          }
          this.minutes = Math.floor(
            ((this.startTime - this.nowTime) / 1000 / 60) % 60
          )
          this.seconds = Math.floor(
            ((this.startTime - this.nowTime) / 1000) % 60
          )
          if (this.hours < 10) {
            this.hours = '0' + this.hours
          }
          if (this.minutes < 10) {
            this.minutes = '0' + this.minutes
          }
          if (this.seconds < 10) {
            this.seconds = '0' + this.seconds
          }
        } else {
          this.hours = '00'
          this.minutes = '00'
          this.seconds = '00'
          if (this.numCount == 0) {
            this.time119()
            this.numCount++
          }
        }
      }, 1000)
    },
  },
  beforeDestroy() {
    clearInterval(this.timeName)
    clearInterval(this.curTime)
  },
}
</script>
<style lang="less" scoped src='./index.less'>
</style>